doctype html
html(lang="en")
    head
        meta(charset="utf-8")
        meta(name="description", content= "tsParticles")
        meta(name="author", content= "Matteo Bruni")
        meta(name="apple-mobile-web-app-capable" content="yes")
        meta(name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no")

        meta(name="twitter:card" content="summary_large_image")
        meta(name="twitter:creator" content="@HollowMatt_ITA")
        meta(name="twitter:image:src" content="https://particles.js.org/images/demo2.png")
        meta(property="og:title" content="tsParticles - A lightweight TypeScript library for creating particles")
        meta(property="og:site_name" content="tsParticles")
        meta(property="og:url" content="https://particles.js.org/")
        meta(property="og:description" content="A lightweight TypeScript library for creating particles.")
        meta(property="og:image" content="https://particles.js.org/images/demo2.png")

        title tsParticles
        link(href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css")
        link(href="/fontawesome/css/all.css" rel="stylesheet" type="text/css")
        link(href="/jsoneditor/jsoneditor.css" rel="stylesheet" type="text/css")
        link(href="/stylesheets/main.css" rel="stylesheet" type="text/css")

    body
        .container-fluid.m-0.vh-100
            .row.h-100
                #sidebar.col-3.p-0.h-100(style="overflow: auto; z-index: 10000;")
                    .row.p-1
                        .col
                            .input-group
                                select.custom-select#presets
                                    option(value="background") Background Mask
                                    option(value="big") Big Particles
                                    option(value="bubble") Bubble
                                    option(value="chars") Chars
                                    option(value="clickPause") Click Pause
                                    option(value="collisionsAbsorb") Collisions Absorb
                                    option(value="collisionsBounce") Collisions Bounce
                                    option(value="collisionsDestroy") Collisions Destroy
                                    option(value="connect") Connect
                                    option(value="customPreset") Custom Preset
                                    option(value="customShape") Custom Shape
                                    option(value="dataImages") Data URI Images
                                    option(value="basic") Default
                                    option(value="destroy") Destroy
                                    option(value="disappearing") Disappearing
                                    option(value="divEvents") Div Events
                                    option(value="forward") Forward
                                    option(value="grabRandomColor") Grab Random Color
                                    option(value="gravity") Gravity
                                    option(value="growing") Growing
                                    option(value="fontawesome") Font Awesome
                                    option(value="images") Images
                                    option(value="imagesDirections") Images with Custom Directions
                                    option(value="infection") Infection
                                    option(value="life") Life
                                    option(value="lightHover") Light Hover
                                    option(value="linkTriangles") Link Triangles
                                    option(value="manual") Manual
                                    option(value="motionDisable") Motion Disable
                                    option(value="motionReduce") Motion Reduce
                                    option(value="mouseAttract") Mouse Attract
                                    option(value="mouseBounce") Mouse Bounce
                                    option(value="mouseFollow") Mouse Follow
                                    option(value="mouseTrail") Mouse Trail
                                    option(value="moveDistance") Move Distance
                                    option(value="nasa") NASA
                                    option(value="noconfig") No Config
                                    option(value="noisePlanes") Noise Planes
                                    option(value="nyancat") Nyan Cat
                                    option(value="nyancat2") Nyan Cat 2
                                    option(value="parallax") Parallax
                                    option(value="pathPolygonMask") Path Polygon Mask
                                    option(value="planes") Planes
                                    option(value="plasma") Plasma
                                    option(value="polygonMask") Polygon Mask
                                    option(value="polygons") Polygon Shape
                                    option(value="random") Random Colors
                                    option(value="reactBubbles") React Bubbles
                                    option(value="reactDefaults") React Defaults
                                    option(value="reactMultipleImages") React Multiple Images
                                    option(value="reactNightSky") React Night Sky
                                    option(value="reactSimple") React Simple
                                    option(value="reactSnow") React Snow
                                    option(value="responsive") Responsive
                                    option(value="shadow") Shadow
                                    option(value="shape-bubble") Shape Bubble
                                    option(value="shape-heart") Shape Heart
                                    option(value="shape-multiline-text") Shape Multiline Text
                                    option(value="shape-spiral") Shape Spiral
                                    option(value="slow") Slow on Hover
                                    option(value="snow") Snow
                                    option(value="star") Star
                                    option(value="strokeAnimation") Stroke Animation
                                    option(value="svgReplace") Svg Replace
                                    option(value="test") Test
                                    option(value="trail") Trails
                                    option(value="twinkle") Twinkle
                                    option(value="vibrate") Vibrate
                                    option(value="virus") Virus
                                    option(value="warp") Warp
                                .btn-group.input-group-append
                                    button#btnUpdate.btn.btn-primary.btn-xs(type="button") Reload Particles
                                    .btn-group
                                        button.btn.btn-primary.dropdown-toggle(type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false") Share
                                        .dropdown-menu
                                            a.dropdown-item(target="_blank" href="https://www.facebook.com/dialog/feed?app_id=508841200049663&link=https://particles.js.org&picture=https://particles.js.org/images/demo2.png&name=tsParticles&description=tsParticles%20-%20A%20lightweight%20TypeScript%20library%20for%20creating%20particles&redirect_uri=https://particles.js.org") Facebook
                                            a.dropdown-item(target="_blank" href="https://twitter.com/intent/tweet?text=tsParticles%20-%20A%20lightweight%20TypeScript%20library%20for%20creating%20particles&url=https://particles.js.org&hashtags=typescript,particles,html5,webdesign&via=HollowMatt_ITA") Twitter
                                            a.dropdown-item(target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://particles.js.org&title=tsParticles&summary=A%20lightweight%20TypeScript%20library%20for%20creating%20particles&source=https://particles.js.org") LinkedIn
                                            a.dropdown-item(target="_blank" href="https://dev.to/new?prefill=---%5Cn%20title%3A%20tsParticles%5Cn%20published%3A%20false%5Cn%20tags%3A%20javascript%2C%20showdev%2C%20webdesign%2C%20github%5Cn%20---%5Cn%20%5Cn%20%5Cn%20%5Cn%20tsParticles%20-%20A%20lightweight%20TypeScript%20library%20for%20creating%20particles%20https://particles.js.org%5Cn") Dev
                                            a.dropdown-item(target="_blank" href="http://www.pinterest.com/pin/create/button/?url=https://particles.js.org&media=https://particles.js.org/images/demo2.png&description=tsParticles%20-%20A%20lightweight%20TypeScript%20library%20for%20creating%20particles%20https://particles.js.org" data-pin-do="buttonPin" data-pin-config="above") Pinterest
                                            a.dropdown-item(target="_blank" href="mailto:steve@jobs.com?subject=tsParticles%20-%20A%20lightweight%20TypeScript%20library%20for%20creating%20particles&body=tsParticles%20-%20A%20lightweight%20TypeScript%20library%20for%20creating%20particles%20https://particles.js.org") Email
                                    .btn-group
                                        button.btn.btn-primary.dropdown-toggle(type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false") Other
                                        .dropdown-menu
                                            a#export-image.dropdown-item(href="#") Export Image
                                            a#export-config.dropdown-item(href="#") Export Config
                                            .dropdown-divider
                                            a#toggle-stats.dropdown-item(href="#") Toggle Stats
                                            .dropdown-divider
                                            a#codepen-export.dropdown-item(href="#") Export to CodePen
                    .row
                        .col
                            #editor
                #tsparticles-container.col.p-0.h-100
                    .circle.repulse(style="width: 200px; height: 200px; background-color: rgba(255, 255, 255, .5); border-radius: 100px; position: absolute; top: 10%; left: 10%; margin-left: -100px; margin-bottom: -100px; z-index: 200")
                    .circle.bubble(style="width: 200px; height: 200px; background-color: rgba(255, 255, 255, .5); border-radius: 100px; position: absolute; top: 10%; right: 10%; margin-right: -100px; margin-bottom: -100px; z-index: 200")
                    .rectangle.repulse(style="width: 200px; height: 200px; background-color: rgba(255, 255, 255, .5); position: absolute; bottom: 10%; left: 10%; margin-left: -100px; margin-top: -100px; z-index: 200")
                    .rectangle.bubble(style="width: 200px; height: 200px; background-color: rgba(255, 255, 255, .5); position: absolute; bottom: 10%; right: 10%; margin-right: -100px; margin-top: -100px; z-index: 200")
                    .circle.bounce(style="width: 200px; height: 200px; background-color: rgba(255, 255, 255, .5); border-radius: 100px; position: absolute; top: 10%; right: 50%; margin-right: -100px; margin-bottom: -100px; z-index: 200")
                    .rectangle.bounce(style="width: 200px; height: 200px; background-color: rgba(255, 255, 255, .5); position: absolute; bottom: 10%; left: 50%; margin-left: -100px; margin-top: -100px; z-index: 200")
                    #tsparticles
                    .github
                        a.btn.btn-link(href="https://github.com/tsparticles/tsparticles" title="Find more info on GitHub")
                            img#gh-mark.img-fluid(src="https://particles.js.org/images/GitHub-Mark-120px-plus.png" alt="")
                            span#gh-project tsParticles
                    span.toggle-sidebar
                        span.caret-right
                            i.fas.fa-caret-right
                        span.caret-left
                            i.fas.fa-caret-left
                    #stats(hidden)
                        .count-particles
                            |
                            span.js-count-particles --
                            | particles

        #exportModal.modal.fade(tabindex="-1" role="dialog" aria-labelledby="exportModalLabel" aria-hidden="true")
            .modal-dialog.modal-lg(role="document")
                .modal-content
                    .modal-header
                        h5#exportModalLabel.modal-title Export
                        button.close(type="button" data-dismiss="modal" aria-label="Close")
                        span(aria-hidden="true") &times;
                    .modal-body
                        .modal-body-content
                    .modal-footer
                        button.btn.btn-primary(type="button" data-dismiss="modal") Close

        form(action="https://codepen.io/pen/define" method="POST" target="_blank" hidden id="code-pen-form")
            input(type="hidden" name="data" value="" id="code-pen-data")
            input(type="submit" value="Create Pen")

        script(src="/jquery/jquery.slim.min.js")
        script(src="/popper.js/umd/popper.min.js")
        script(src="/bootstrap/js/bootstrap.min.js")
        script(src="/fontawesome/js/all.js")
        script(src="/jsoneditor/jsoneditor.js")
        script(src="/stats.ts/dist/stats.min.js")
        script(src="/tsparticles-engine/tsparticles.engine.min.js")
        script(src="/tsparticles-configs/tsparticles.configs.min.js")
        script(src="/tsparticles-slim/tsparticles.slim.min.js")
        script(src="/tsparticles/tsparticles.min.js")
        script(src="/interaction-external-attract/tsparticles.interaction.external.attract.min.js")
        script(src="/interaction-external-bounce/tsparticles.interaction.external.bounce.min.js")
        script(src="/interaction-external-bubble/tsparticles.interaction.external.bubble.min.js")
        script(src="/interaction-external-connect/tsparticles.interaction.external.connect.min.js")
        script(src="/interaction-external-grab/tsparticles.interaction.external.grab.min.js")
        script(src="/interaction-external-pause/tsparticles.interaction.external.pause.min.js")
        script(src="/interaction-external-push/tsparticles.interaction.external.push.min.js")
        script(src="/interaction-external-remove/tsparticles.interaction.external.remove.min.js")
        script(src="/interaction-external-repulse/tsparticles.interaction.external.repulse.min.js")
        script(src="/interaction-particles-attract/tsparticles.interaction.particles.attract.min.js")
        script(src="/interaction-particles-collisions/tsparticles.interaction.particles.collisions.min.js")
        script(src="/interaction-particles-links/tsparticles.interaction.particles.links.min.js")
        script(src="/move-base/tsparticles.move.base.min.js")
        script(src="/move-parallax/tsparticles.move.parallax.min.js")
        script(src="/shape-circle/tsparticles.shape.circle.min.js")
        script(src="/shape-image/tsparticles.shape.image.min.js")
        script(src="/shape-line/tsparticles.shape.line.min.js")
        script(src="/shape-polygon/tsparticles.shape.polygon.min.js")
        script(src="/shape-square/tsparticles.shape.square.min.js")
        script(src="/shape-star/tsparticles.shape.star.min.js")
        script(src="/shape-text/tsparticles.shape.text.min.js")
        script(src="/updater-life/tsparticles.updater.life.min.js")
        script(src="/updater-opacity/tsparticles.updater.opacity.min.js")
        script(src="/updater-size/tsparticles.updater.size.min.js")
        script(src="/updater-color/tsparticles.updater.color.min.js")
        script(src="/updater-stroke-color/tsparticles.updater.stroke-color.min.js")
        script(src="/updater-out-modes/tsparticles.updater.out-modes.min.js")
        script(src="/updater-tilt/tsparticles.updater.tilt.min.js")
        script(src="/updater-roll/tsparticles.updater.roll.min.js")
        script(src="/updater-rotate/tsparticles.updater.rotate.min.js")
        script(src="/updater-wobble/tsparticles.updater.wobble.min.js")
        script(src="/interaction-external-trail/tsparticles.interaction.external.trail.min.js")
        script(src="/plugin-absorbers/tsparticles.plugin.absorbers.min.js")
        script(src="/plugin-emitters/tsparticles.plugin.emitters.min.js")
        script(src="/plugin-polygon-mask/tsparticles.plugin.polygon-mask.min.js")
        script(src="/interaction-light/tsparticles.interaction.light.min.js")
        script(src="/interaction-particles-repulse/tsparticles.interaction.particles.repulse.min.js")
        script(src="/updater-gradient/tsparticles.updater.gradient.min.js")
        script(src="/updater-orbit/tsparticles.updater.orbit.min.js")
        script(src="/plugin-hsv-color/tsparticles.plugin.hsvColor.min.js")
        script(src="/plugin-infection/tsparticles.plugin.infection.min.js")
        script(src="/shape-bubble/tsparticles.shape.bubble.min.js")
        script(src="/shape-heart/tsparticles.shape.heart.min.js")
        script(src="/shape-rounded-rect/tsparticles.shape.rounded-rect.min.js")
        script(src="/shape-spiral/tsparticles.shape.spiral.min.js")
        script(src="/path-curves/tsparticles.path.curves.min.js")
        script(src="/path-polygon/tsparticles.path.polygon.min.js")
        script(src="/path-perlin-noise/tsparticles.path.perlin.noise.min.js")
        script(src="/path-simplex-noise/tsparticles.path.simplex.noise.min.js")
        script(src="/javascripts/demo.js")
